<template>
  <!-- 学科 -->
  <div class="container">
     <div class="app-container">
    <el-form  :inline="true" :model="SearchTags">
         <el-row :gutter="30">
        <el-col :span="5">
      <el-form-item label="学科名称" prop="catalogs">
        <el-input
         v-model="SearchTags.catalogs"
        ></el-input>
      </el-form-item>
      </el-col>
      <el-col :span="1" :pull="1" style="margin-right:10px">
        <el-form-item>
        <el-button
        @click="btnClear"
        >清除</el-button>
      </el-form-item>
      </el-col>
      <el-col :span="16" :pull="1">
        <el-form-item>
        <el-button type="primary"
         @click="SearchTagsFn"
        >搜索</el-button>
      </el-form-item>
      </el-col>
      <el-col :span="1" >
      <el-form-item >
        <el-button icon="el-icon-edit" type="success" @click="showDialog = true">新增学科</el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    <!-- 总数模块 -->
    <div class="dataSum">
      <i class="el-icon-info"></i>
      <span>数据一共{{ this.total }}条</span>
    </div>
    <!-- 数据渲染 -->
    <el-table
      :data="dataList"
      v-loading="listLoading"
      style="width: 100%"
      class="dataTable"
      highlight-current-row
      fit
    >
      <el-table-column type="index" label="序号" width="90" align="center">
      </el-table-column>
      <el-table-column
        label="学科名称"
        prop="subjectName"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="创建者"
        prop="username"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="创建日期"
        prop="addDate"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="前台是否显示"
        prop="isFrontDisplay"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column
        label="二级目录"
        prop="twoLevelDirectory"
        align="center"
        width="180"
      >
      </el-table-column>
      <el-table-column label="标签" prop="tags" width="230" align="center">
      </el-table-column>
      <el-table-column
        label="题目数量"
        prop="totals"
        width="180"
        align="center"
      >
      </el-table-column>

      <el-table-column label="操作" width="230">
        <template slot-scope="scope">
          <el-button type="text" size="small"
            @click="$router.push(`/subjects/directorys/?subjectID=${scope.row.subjectName}`)"
          >学科分类</el-button>
          <el-button
            type="text"
            size="small"
            @click="$router.push(`/subjects/tags/?subjectID=${scope.row.id}`)"
            >学科标签</el-button>
          <el-button type="text" size="small" @click="btnEdit(scope.row)">修改</el-button>
          <el-button type="text" size="small"
          @click="btnCancle(scope.row.id)"
                :disabled="scope.row.state?true:false"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="float: right">
      <div class="pages">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Number(page.page)"
          :total="Number(total)"
          :page-size="Number(page.pagesize)"
          :page-sizes="[10, 20, 30, 50]"
          layout="sizes, prev, pager, next, jumper"
        ></el-pagination>
      </div>
    </div>
    </div>
    <!-- 新增弹层 -->
    <SubjectsAdd ref="SubjectsAdd" :showDialog.sync="showDialog"  @list="list()"/>

  </div>
</template>

<script>
import { list, remove } from '../../api/hmmm/subjects'
import SubjectsAdd from '../components/subjects-add.vue'
export default {
  data () {
    return {
      // 搜索框表单
      SearchTags: {
        catalogs: null // 名称
      },
      dataList: [],
      // 表格数据加载状态
      // 分页数据
      page: {
        page: 1, // 当前页数
        pagesize: 10// 页尺寸
      },
      total: '', // 数据总数//subjectID: null // 从学科页面跳转过来的筛选条件
      showDialog: false// 新增弹层显示隐藏
    }
  },
  components: {
    SubjectsAdd
  },
  created () {
    this.list()// 数据渲染
  },
  methods: {
    async list () {
      // 开启加载状态
      this.listLoading = true
      try {
        const { data } = await list({ ...this.page, subjectName: this.SearchTags.catalogs || null })
        console.log(data)
        this.dataList = data.items
        this.total = data.counts
        this.subjectID = Object.keys(data.items)
        console.log(data)
      } catch (err) {
        console.log(err)
      }
      // 关闭加载状态
      this.listLoading = false
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      // pageSize 改变时会触发 回调参数：每页条数 再重新设置size
      this.page.pagesize = val
      if (this.page.page === 1) {
        this.list()// 更新视图
      }
    },
    // 进入某一页
    handleCurrentChange (val) {
      // currentPage 改变时会触发 回调参数:当前页 重新设置当前页
      this.page.page = val
      this.list()// 更新视图
    },
    async btnCancle (id) {
      await this.$confirm('删除此学科 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
      // 调接口
      await remove({ id })
      // 更新视图
      this.list()
    },
    // 清除按钮
    btnClear () {
      // 重置搜索数据
      this.SearchTags = {
        catalogs: null,
        state: null
      }
      // 重置页数
      this.page = {
        page: 1,
        pagesize: 10
      }
      // 重新调所有数据
      this.list()
    },
    // 修改
    btnEdit (row) {
      //  调用子组件方法 实现数据回填
      this.$refs.SubjectsAdd.formDataBack(row)
      // 开启弹层
      this.showDialog = true
    },
    // 搜索按钮
    SearchTagsFn () {
      // 重置页数回到第一页
      this.page = {
        page: 1,
        pagesize: 10
      }
      this.list()// 重新调接口
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  margin: 11px 10px 10px 10px;
  background-color: #fff;
  border-radius: 5px;

  .dataSum {
    height: 30px;
    background-color: #f0f2f5;
    font-size: 15px;
    padding-left: 15px;
    margin: 0 30px 10px 20px;
    line-height: 30px;
    border-radius: 5px;
    span,
    i {
      color: rgb(170, 170, 177);
    }
  }
  .dataTable {
    margin-right: 5px;
  }
}
</style>
